<template>
	<view>
		<view class="success">
			<view class="fonticon icon">
				&#xe689;
			</view>
			<view>支付成功</view>
			<view class="tip">提示:请您把收货信息补充完整</view>
		</view>


		<!-- 个人信息 -->
		<view class="paragraph">

			<!--收货地址  -->
			<view class="input">
				<view class="left">收货地址</view>
				<view class="right ">
					<picker @change="cityChange" mode="region" :value="regionindex" :range="region">
						<view class="uni-input">{{city}}</view>
					</picker>
				</view>
			</view>

			<!-- 收货地址详细 -->
			<view class="input">
				<view class="left"></view>
				<view class="right">
					<input type="text" v-model="address" placeholder="请输入详细地址 例:5号楼186号">
				</view>
			</view>


			<!-- 收件人 -->
			<view class="input">
				<view class="left">收件人</view>
				<view class="right">
					<input type="text" v-model="name" placeholder="请填写收件人">
				</view>
			</view>

			<!-- 收件电话 -->
			<view class="input">
				<view class="left">收件电话</view>
				<view class="right">
					<input type="number" v-model="phone" placeholder="请填写收件电话">
				</view>
			</view>

			<!-- 备注 -->
			<view class="input">
				<view class="left">备注</view>
				<view class="right">
					<input type="text" v-model="msg" placeholder="按需填写" />
				</view>
			</view>




			<form @submit='updataorder' report-submit='true'>
				<view class="padding">
					<!-- 获取formid -->

					<button class="absolute" form-type='submit'></button>
					
					<view class="btn">
						提交信息
					</view>
				</view>
			</form>

		</view>
	</view>
</template>

<script>
	import amap from '@/common/amap-wx.js'

	// 接口相关
	import _function from '@/common/_function.js'
	import api from '@/common/api.js'


	export default {
		data() {
			return {
				region: [], //城市信息
				city: '选择城市',
				regionindex: 0,
				address: '', //收货地址
				name: '', //收件人
				phone: '', //电话
				msg: '', //备注信息

				orderid: '', // 订单id

				amapPlugin: null, //高德地图
				key: '8ae848c408f1cdfdb2e1cdab0ee0d16a' //key
			};
		},
		methods: {
			// 选择城市信息
			cityChange(e) {
				console.log(e)
				this.city = e.detail.value.join(' ')
			},

			// 更新订单
			async updataorder(e) {
				console.log(e.detail.formId)
				// 给服务端发送formid
				_function.request(api.formid,{
					formid:e.detail.formId
				},'POST')
				
				let {
					city,
					address,
					name,
					phone,
					msg
				} = this

				if (city === '选择城市') {
					uni.showToast({
						title: '请选择城市',
						duration: 2000,
						icon: 'none'
					})
					return false
				} else if (!address.length) {
					uni.showToast({
						title: '请输入收货地址',
						duration: 2000,
						icon: 'none'
					})
					return false
				} else if (!name.length) {
					uni.showToast({
						title: '请填写收件人姓名',
						duration: 2000,
						icon: 'none'
					})
					return false
				} else if (phone.length != 11) {
					uni.showToast({
						title: '手机号长度错误',
						duration: 2000,
						icon: 'none'
					})
					return false
				}

				uni.showLoading({
					title: '提交中',
					mask: true
				})

				const res = await _function.request(api.updataorder, {
					id: this.orderid,
					address: city + ' ' + address,
					name,
					phone,
					msg
				}, 'POST')

				if (res.data.code) {
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: res.data.msg,
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '../index/index'
								})
							}
						}
					})
				}

			}
		},
		onLoad(options) {
			// 订单id
			this.orderid = options.orderid
			console.log(options.orderid)

			// 创建高德地图实例
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			})
			// 高德地图获取位置信息
			this.amapPlugin.getRegeo({
				success: (data) => {
					console.log(data)
					this.city = data[0].regeocodeData.addressComponent.province + ' ' + data[0].regeocodeData.addressComponent.city +
						' ' + data[0].regeocodeData.addressComponent.district
				},
				fail: err => {
					uni.showToast({
						title: '调用位置接口失败',
						duration: 2000,
						icon: 'none'
					})
				}
			})
		}
	}
</script>

<style lang="scss">
	.success {

		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 60rpx;

		.icon {
			font-size: 120rpx;
			color: #4CD964;
		}

		.tip {
			font-size: 28rpx;
		}
	}

	.paragraph {
		margin: 20rpx 0;
		background-color: #fff;
		font-size: 28rpx;


		.padding {
			position: relative;
			padding: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				width: 60%;
				height: 80rpx;
				background-color: #4CD964;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				border-radius: 10rpx;
			}
		}

		.input {
			padding: 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #E8E8E8;
			background-color: #fff;

			.left {
				width: 30%;
			}

			.right {
				flex: 1;

				// 车牌信息
				.carnumber {
					display: flex;
					align-items: center;

					// 城市
					.city {
						width: 50rpx;
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #4989ff;
						color: #fff;
						border-radius: 5rpx;
						margin-right: 10rpx;
						box-sizing: border-box;
					}

					.number {
						flex: 1;
						font-size: 26rpx;
						padding-left: 20rpx;
					}
				}



			}



			.flex {
				display: flex;
				justify-content: flex-end;

			}

		}

	}
</style>
